import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
import Count from '../count'
import CrossWiseRate from '../crosswiseRate'
interface ICount {
    text: string,
    num: string,
    unit: string,
    upDownStatus: boolean,
    saleRate: string,
    ImgUrl: string,
    comparisonText?: string,
}

const Transport = styled.div` 
      
        display:flex;
        font-size: 1.4rem;
        width:30.1rem;
        height: 11.8rem;
        color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border:1px solid #0A4F89;
        background:rgba(6,31,79,.5);
        .top,.bottom{
            flex: 1 1 50%;
            display:flex; 
        }
        .bottom{
            color: #F36964;
            /* background:rgba(8,50,107,.5); */
            text-align:center;
            display:flex;
            flex-direction: row; 
            .img{ 
                flex:1 1 30%;
                align-content: flex-end;
                width: 11.8rem;
                height: 6.1rem; 
                position: relative;
                top:50%; 
                transform: translate( 0,-50%); 
            }
            .right{
                flex:1 1 70%;
                display: flex; 
                .rate{ 
                }
                
            }
        }

        span{
          position: relative;
          top:-1rem;
          font-size: 3.2rem;
          margin: 1rem;
          color:#00F6FF;
        } 
`

const Content: FC<ICount> = function (props) {

    return (
        <Transport>
            <div className='top'>{props.text}</div>
            <div className='bottom'> 
                <img className='img' src={props.ImgUrl} />
                <div className='right'>
                    <Count num={props.num} unit={props.unit} /> 
                <div className='rate'> <CrossWiseRate comparisonText={props.comparisonText} upDownStatus={props.upDownStatus} saleRate={props.saleRate} /></div>
                </div>
            </div>

        </Transport>
    )
}

export default Content
